<template>
  <div :data="data" :sub="sub">
    <el-table
      :data="data.axis"
      style="width: 100%"
    >
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="start" label="当前位置" align="center" />
      <el-table-column label="目标位置" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row, $index}">
          <el-input-number v-model="row.end" :precision="3" :step="0.1" :max="10000" :min="-10000" size="small" />
          <el-button size="small" @click="onSelectPos(row, $index)"> 选择 </el-button>
          <el-popover
            placement="top-start"
            title="标题"
            width="500"
            trigger="hover"
            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
          >
            <el-table
              ref="singleTable"
              :data="currentPositions"
              highlight-current-row
              style="width: 100%"
              @current-change="onSelectChange"
            >
              <el-table-column property="name" label="名称" />
              <el-table-column property="value" label="位置" />
            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogSelectPosFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="onSelectPosConfirm">确 定</el-button>
            </div>
            <el-button slot="reference">hover 激活</el-button>
          </el-popover>
          <el-select v-model="row.end" clearable placeholder="请选择">
            <el-option
              v-for="item in row.options"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="success" size="small" @click="onMove(row)"> 移动 </el-button>
          <el-button type="danger" size="small" @click="onStop(row)"> 停止 </el-button>
          <el-button type="primary" size="small" @click="onGet(row)"> 获取 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="选择位置" :visible.sync="dialogSelectPosFormVisible">
      <el-table
        ref="singleTable"
        :data="currentPositions"
        highlight-current-row
        style="width: 100%"
        @current-change="onSelectChange"
      >
        <el-table-column property="name" label="名称" />
        <el-table-column property="value" label="位置" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSelectPosFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSelectPosConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'TrackAxis',
  components: { },
  props: {
    id: {
      type: Number,
      default: 0
    },
    data: {
      type: Object,
      default: null
    },
    sub: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      tableWidth: '150',
      dialogSelectPosFormVisible: false,
      selectIndex: 0,
      currentPositions: [],
      currentPosition: null
    }
  },
  // watch: {
  //   data: {
  //     deep: true,
  //     handler(val) {
  //       this.setOptions(val)
  //     }
  //   }
  // },
  created() {
  },
  methods: {
    onSelectPos(row, index) {
      this.dialogSelectPosFormVisible = true
      this.currentPositions = row.positions
      this.selectIndex = index
    },
    onSelectPosConfirm() {
      this.dialogSelectPosFormVisible = false
      this.data.axis[this.selectIndex].end = this.currentPosition.value
    },
    onSelectChange(pos) {
      console.log(pos)
      this.currentPosition = pos
    },
    onMove(axis) {
      var message = {
        code: axis.move_code.toString(),
        msg: axis.end.toString()
      }
      this.publish(this.sub, JSON.stringify(message))
    },
    onStop(axis) {
      var message = {
        code: axis.stop_code.toString(),
        msg: axis.end.toString()
      }
      this.publish(this.sub, JSON.stringify(message))
    },
    onGet(axis) {
      var message = {
        code: axis.get_position_code.toString(),
        msg: axis.end.toString()
      }
      this.publish(this.sub, JSON.stringify(message))
    },
    publish(topic, message) {
      console.log('推送消息')
      console.log('topic:' + topic)
      console.log('message:' + message)
      this.$mqtt.publish(topic, message)
    }

  }
}
</script>

<style lang="scss" scoped>

  .dashboard-editor-container {
    background-color: #e3e3e3;
    min-height: 100vh;
    padding: 50px 60px 0px;
  }
</style>
